import logo from './logo.svg';
import './App.css';

import { My } from './components/My';
import { Change } from './components/Change';

import { MyComponent } from './components/myComponent';

import { MyBrother } from './components/MyBrother';

import { MyDeep } from './components/Deep';

import { MyEffect } from './components/myUse';
import { useState } from 'react';
import { MyHook } from './components/myHook';


function date(key) {
  switch (key) {
    case 1:
      return "周一"
      break;
    case 2:
      return "周二"
      break;
    case 3:
      return "周三"
      break;

    default:
      break;
  }
}

let style = {
  width:'200px',
  height:'200px',
  backgroundColor:'red'
}


// 自定义
function useToggle (){
  const [show,setShow] = useState(true)
  const toggle = ()=>{
    setShow(!show)
  }
  return {
    show,toggle
  }
}


function App() {
  let title = "周一"
  let count = 1


  const handlejia = () => {

    count++;
    console.log(count)
  }
  const handlejian = () => {
    count--
  }

  
  const products = [
    { title: '111', id: 1 },
    { title: '222', id: 2 },
    { title: '333', id: 3 }
  ]

  let productitems = products.map(product => (
    <li>{product.id} + {product.title}</li>
  )
  )


  function One(){
    return (
      <div>
        <h2>我是sj</h2>
        <button>点击</button>
      </div>
    )
  }

  // function My(){
  //   return <h2>我是头部</h2>
  // }

  // const [show,setShow] = useState(true)
  // const toggle = ()=>{
  //   setShow(!show)
  // }

  const {show,toggle} = useToggle()


  return (
    <div>

      {show && <MyHook></MyHook>}
      <hr></hr>
      <button onClick={toggle}>{show?'隐藏':'显示'}</button>

      {/* {show && <MyEffect></MyEffect>} */}
    
    {/* <hr></hr> */}

      {/* <button onClick={()=>setShow(!show)}>{show?'隐藏':'显示'}</button> */}

      {/* <MyDeep></MyDeep>
      <MyBrother/>
      <MyComponent/>
      <Change/> */}

      {/* <My></My>
      <My/>

      <One/> */}


      <div style={style}>我是首页</div>

      <h3 className="today">今天周一</h3>

      <div style={{width:'100px',height:'100px',backgroundColor:'pink'}}>今天{title}</div>
      <hr></hr>
      <div>{title.split("").reverse().join("")}</div>

      <div >现在{date(2)}</div>

      <div>{title == '周一' ? 'yes' : 'no'}</div>


      <button onClick={handlejia}>+</button>
      {count}
      <button onClick={handlejian}>-</button>

      <ul>
      {productitems}
      </ul>

      <ul>
        {
          products.map(product=>(
            <li key={product.id}>{product.title}</li>
          ))
        }
      </ul>
    </div>
  );
}

export default App;
